import React, { useState } from 'react';
import { Checkbox, Col, Form, Modal, Row, Radio, message } from 'dw-mx';
import { request } from 'dw-mx-request';
import { Code } from 'dw-mx-extend';

export default function useModal(dataSource,columns,rowKeys) {

    const [visible,setVisible] = useState(false);

    const open = () => {
        setVisible(true)
    }

    const close = () => {
        setVisible(false)
    }

    const DownloadModal = (props) => {

        const [form] = Form.useForm();

        const dataSum= rowKeys ? rowKeys.length : dataSource.length;

        const download = async () => {
            const colList = form.getFieldsValue().colname;
            if(colList.length === 0){
                message.info('请选择要导出的列')
            }else{
                const checkedData = form.getFieldsValue().downdata;
                // [name]:[dataIndex] 形式的选中列映射
                const col=[];
                columns.forEach(value => {
                    const json={};
                    if(colList.includes(value.title)){
                        json['header'] = value.title;
                        json['fieldName'] = value.dataIndex;
                    }
                    col.push(json)
                })
                console.log(col)
                const filterData = [];
                if(checkedData === "1"){
                    // 导出全部数据
                    dataSource.forEach(value => {
                        const json={};
                        colList.forEach(v => {
                            json[v]=value[v];
                        })
                        filterData.push(json);
                    })
                }else if(checkedData === "2"){
                    // 导出选中数据
                    if(rowKeys){
                        const data = dataSource.filter((value,index) => {
                            if(rowKeys.includes(index)){
                                return value;
                            }
                        })
                        data.forEach(value => {
                            const json={};
                            colList.forEach(v => {
                                json[v]=value[v];
                            })
                            filterData.push(json);
                        })
                    }
                }else if(checkedData === "3"){
                    // 导出未选中数据
                    if(rowKeys){
                        const data = dataSource.filter((value,index) => {
                            if(!rowKeys.includes(index)){
                                return value;
                            }
                        })
                        data.forEach(value => {
                            const json={};
                            colList.forEach(v => {
                                json[v]=value[v];
                            })
                            filterData.push(json);
                        })
                    }

                }
                // 发送后端请求，数据，列映射
                await request.download(props.url,{
                    data:filterData,
                    fileName: '表格测试.xlsx',
                    columns:col
                })
            }

        }

        const options = columns.map((value) => {
            return { label: value.title, value: value.title };
        })

        const layout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 }
        };

        const checkInit = columns.map(value => {
            return value.title;
        })

        const initvalue = {
            'colname':checkInit,
            'downdata':'1'
        }

        return <>
            <Modal
                title={'请选择要导出的数据'}
                visible={visible}
                width={'800px'}
                onCancel={() => props.onCancel()}
                okText={'导出'}
                onOk={() => download()}
            >
                <Form form={form}
                      {...layout}
                      layout={'horizontal'}
                      initialValues={initvalue}
                >
                    <Row>
                        <Col span={24}>
                            <Form.Item label={'导出列'} name={'colname'} >
                                <Checkbox.Group options={options} />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item label={'导出数据'} name={'downdata'}>
                                <Radio.Group options={Code.JSONCODE([
                                    {value:'1',content:'导出全部数据,共'+dataSource.length+'条'},
                                    {value:'2',content:'导出选中数据,共'+dataSum+'条'},
                                    {value:'3',content:'导出未选中数据,共'+(dataSource.length-dataSum)+'条'}
                                ])}/>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    }

    return { open ,close,DownloadModal}

}